<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>FaceFun欢迎您</title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<link href="https://cdn.bootcss.com/bootstrap-fileinput/4.3.8/css/fileinput.min.css" rel="stylesheet">
		
		<link rel="stylesheet" type="text/css" th:href="@{/css/public.css}"/>
		<link rel="stylesheet" type="text/css" th:href="@{/css/headerandfooter.css}">
		
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
		<body>
			<!-- 顶部导航 -->
			<nav class="navbar navbar-whilte" role="navigation">
				<div class="container">
					<div class="navbar-header">
						<a class="navbar-brand" th:href="@{/index}">
							<img class="pull-left logo" th:src="@{/img/logo.png}" >
							<span class="brand icon">FaceFun</span>
						</a>
							
						   <h4 class="navbar-left" style="margin-left:20px;">用户[[${session.user!=null?"信息":"注册"}]]</h4>
					</div>

				
						<div class="rightarea">
							<span class="rightword">加入FaceFun，一切从现在开始</span>
						<div>
				</div>
			</nav>
			

			<div class="content container">
		
					
					<div class=" panel panel-default">
				
			
						    

						  <!-- Tab panes -->
						  <div class="panel-body ">
						   
								<form th:action="@{/user}" th:object="${session.user!=null?session.user:user}"  class="form-horizontal" method="POST" enctype="multipart/form-data" data-toggle="validator" role="form" data-focus="false" >
		  		   					 
		  		   					 <div class="form-group">
		  		   					 	<label for="head" class="col-xs-2 control-label">头像：</label>
							            <div class="kv-avatar text-center col-xs-3">
							                <input id="head" name="head" type="file" class="file-loading">
							            </div>
							        </div>
		  					
		  		   					 
					  		    	<div class="form-group" id="namegroup" >
					  		    		<label for="name" class="col-xs-2 control-label">用户名：</label>
					  		    		<div class="col-xs-3">
					  		    			<input th:if="${session.user==null}" type="text" class="form-control" id="name"  name="name" autocomplete="off" required="required" data-error="用户名不能为空">
					  		    			<div style="padding:7px 0 0 10px;" th:if="${session.user!=null}">[[*{name}]]</div>
					  		    		</div>
					  		    		<div class="help-block with-errors col-xs-5" id="nameerror"></div>
					  		    	</div>
					  		    	<div class="form-group">
					  		    		<label for="" class="col-xs-2 control-label">密码：</label>
					  		    		<div class="col-xs-3">
					  		    			<input th:value="*{pwd}"  type="password" class="form-control" id="pwd"  name="pwd" required="required" data-error="密码不能为空">
					  		    		</div>
					  		    		<div class="help-block with-errors col-xs-5"></div>
					  		    	</div>
					  		    	<div class="form-group">
					  		    		<label for="" class="col-xs-2 control-label">确认密码：</label>
					  		    		<div class="col-xs-3">
					  		    			<input th:value="*{pwd}"  type="password" class="form-control" required="required" data-error="确认密码不能为空"  data-match="#pwd" data-match-error="两次密码输入不一致">
					  		    		</div>
					  		    		<div class="help-block with-errors col-xs-5"></div>
					  		    	</div>
					  		    	
					  		    	<div class="form-group ">
					  		    		<label  class="col-xs-2 control-label">性别：</label>
					  		    		<div class="col-xs-3 radio" style="margin-bottom:7px;" >
						  		    		<label><input checked="checked" type="radio"  name="sex"  value="true">男</label>&nbsp;&nbsp;&nbsp;&nbsp;
						  		    		<label><input th:checked="!*{sex}"  type="radio" name="sex" value="false">女</label>
					  		    		</div>
					  		    	</div>
					  		    	<div class="form-group">
					  		    		<label for="" class="col-xs-2 control-label">喜欢类型：</label>
					  		    		<div class="col-xs-2">
					  		    			<select name="hobby" id="hobby" class="form-control" >
					  		    				<option value=""></option>
		  		    							<option th:each="t:${types}" th:value="${t.id}">[[${t.name}]]</option>
					  		    			</select>
					  		    		</div>
					  		    	</div>
					  		    	
					  		    	<div class="form-group">
					  		    		<label for="" class="col-xs-2 control-label">电话：</label>
					  		    		<div class="col-xs-3">
					  		    			<input th:value="*{tel}"  type="text" class="form-control"  autocomplete="off" name="tel">
					  		    		</div>
					  		    	</div>
					  		    	
					  		    	
					  		    	<div class="form-group">
					  		    		<label for="" class="col-xs-2 control-label">个人介绍：</label>
					  		    		<div class="col-xs-8">
					  		    			<textarea th:text="*{info}" name="info" id="info" class="form-control" rows="5"></textarea>
					  		    		</div>
					  		    	</div>
					  		    	<div class="form-group text-center">
					  		    	
					  		    	<input name="id" th:value="*{id}" type="hidden" th:if="${session.user!=null}"/>
					  		    	<input th:value="*{headimg}"  type="hidden" class="form-control"  autocomplete="off" name="headimg">
					  		    	<input name="_method" value="PUT" type="hidden" th:if="${session.user!=null}"/>
								 		<button type="submit" class="btn btn-danger">[[${session.user!=null?"修改":"注册"}]]</button>
		  		 			 			
									</div>
									
									
								</form>
						  </div>	
					</div>
			</div>
			 
			<div th:replace="front/index :: footer"></div>
			

			<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   			 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

			<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
			<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
			<script src="https://cdn.bootcss.com/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
			<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.3.8/js/fileinput.min.js"></script>
			<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.3.9/js/locales/zh.min.js"></script>
		
			<script th:inline="javascript">
			var u=[[${session.user}]]
			var config={
					language:'zh',
					overwriteInitial: true,
				    maxFileSize: 1500,
				    showClose: false,
				    showCaption: false,
				    browseLabel: '',
				    removeLabel: '',
				    browseIcon: '<i class="glyphicon glyphicon-folder-open"></i>',
				    removeIcon: '<i class="glyphicon glyphicon-remove"></i>',
				    removeTitle: 'Cancel or reset changes',
				    elErrorContainer: '#kv-avatar-errors-1',
				    msgErrorClass: 'alert alert-block alert-danger',
				    defaultPreviewContent: '<img src="/img/default.jpg" style="width:170px">',
				    layoutTemplates: {main2: '{preview}{remove} {browse}'},
				    allowedFileExtensions: ["jpg", "png", "gif"],
				    initialPreview:[],
		  			initialPreviewConfig:[]
			};
			if(u!=null && u.name.length!=0){
				$('#hobby').val(u['hobby'])
				if(u.headimg!=null && u.headimg.length!=0 && u.headimg!='/img/default.jpg'){
					config['initialPreview']=['<img src="'+u['headimg']+'" class="file-preview-image">']
					config['initialPreviewConfig']=[{caption:'headimg.jpg',showDelete:false}]	
				}
			}
				$('#head').fileinput(config)
			$('.file-preview').css('border',0)	
			var error=[[${error}]];
			if(error!=null)
				alert(error);
			
				</script>
		</body>
</html>